<template>
  <div class="time-line">
    <div class="title">Timeline</div>
    <el-timeline>
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        :color="activity.color"
      >
        <div class="content">
          <div class="label">{{ activity.label }}</div>
          <div class="time">{{ activity.time }}</div>
        </div>
      </el-timeline-item>
    </el-timeline>
    <img src="@/assets/images/pc_main_time.png" alt="" class="img" />
    <div class="info">
      Our focus is link east-west markets and to nurture and highlight
      groundbreaking ideas in this expansive world of Web3 infrastructure and
      dApps layers by setting the stage for ideas that can redefine the
      blockchain landscape. With two main event themes —
      <span>Infrastructure</span> and <span>Web3 DApps</span> — developers are
      invited to address the pressing challenges and needs of the modern
      blockchain ecosystem. With a grand prize pool of 60,000 $USDT, we are
      calling upon builders and designers to collaborate, push boundaries, craft
      projects.and transform ideas into reality.
      <div style="height: 15px"></div>
      Proudly supported by leading Web3 companies and communities from various
      countries in Asia, we are thrilled to announce the partnership with top
      enterprises and communities such as Coin98 from Vietnam, Hashed from South
      Korea, YGG from the Philippines, and HashKey and Animoca Ventures from
      Hong Kong. Additionally, we have esteemed mentors from global technology
      pioneers like Orderly Network, Layerzero Labs, Starknet, Scroll and Aptos.
      Our team of experts will be on hand to offer mentorship, guidance, and
      valuable insights to help participants shape their projects.
    </div>
    <div class="price">Total Prize</div>
    <img src="@/assets/images/pc_main_price.png" alt="" class="price-img" />
    <div class="price-info">
      At the conclusion of the hackathon powered by C² Ventures , participants
      will have the opportunity to present their projects to a panel of expert
      judges and industry leaders at Web3 Connect Conference on Sept 15th at
      Fullerton Hotel Singapore. Winning teams will receive recognition,
      valuable prizes, and potential opportunities for investments.
    </div>
    <div class="price-border">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </div>
</template>

<script setup>
const activities = [
  {
    label: 'Opening',
    time: 'August 21,2023',
    color: '#5CD848',
  },
  {
    label: 'Registration',
    time: 'August 21, 2023 - September 10, 2023, Online',
    color: '#5CD848',
  },
  {
    label: 'Hackathon Preliminary Judging',
    time: 'September 11, 2023 - September 14, 2023, Online',
  },
  {
    label: 'Demo Day (Presenting & Final Judging)',
    time: 'September 15, 2023, Onsite at Web3 Connect Conference',
  },
  {
    label: 'Awards Ceremony',
    time: 'September 15, 2023, Onsite at Web3 Connect Summit',
  },
]
</script>

<style lang="scss" scoped>
.time-line {
  margin-top: 80px;
  .title {
    color: #5cd848;
    font-size: 50px;
    font-family: poppins-bold;
    padding-bottom: 60px;
  }
  .el-timeline {
    padding-left: 0;
  }
  .content {
    display: flex;
    justify-content: space-between;
    position: relative;
    top: -5px;
    .label {
      color: #d5d5d5;
      font-size: 22px;
    }
    .time {
      color: #fff;
      font-size: 22px;
      font-family: poppins-bold;
    }
  }
  :deep(.el-timeline-item:nth-child(1) .el-timeline-item__tail) {
    border-color: #5cd848;
  }
  .img {
    width: 100%;
    margin-top: 80px;
  }
  .info {
    margin-top: 50px;
    font-size: 20px;
    line-height: 44px;
    color: #d5d5d5;
    span {
      color: #fff;
      font-family: poppins-bold;
    }
  }
  .price {
    color: #5cd848;
    font-size: 50px;
    line-height: 60px;
    font-family: poppins-bold;
    margin-top: 100px;
  }
  .price-img {
    width: 754px;
    margin-top: 60px;
  }
  .price-info {
    font-size: 20px;
    line-height: 44px;
    margin-top: 30px;
    color: #d5d5d5;
  }
  .price-border {
    height: 0px;
    width: 1616px;
    height: 1px;
    margin: 100px -218px;
    display: flex;
    align-items: center;
    .left {
      width: 50%;
      height: 1px;
      background: linear-gradient(270deg, #5cd848 0%, rgba(92, 216, 72, 0.06));
    }
    .right {
      width: 50%;
      height: 1px;
      background: linear-gradient(90deg, #5cd848 0%, rgba(92, 216, 72, 0.06));
    }
  }
}
@media screen and (max-width: 1180px) {
  .time-line {
    margin-top: 50px;
    .title {
      font-size: 22px;
      line-height: 26px;
    }
    .content {
      flex-direction: column;
      .label {
        font-size: 14px;
      }
      .time {
        font-size: 14px;
      }
    }
    .img {
      width: 100%;
      margin-top: 40px;
    }
    .info {
      font-size: 14px;
      line-height: 28px;
      margin-top: 30px;
    }
    .price {
      font-size: 22px;
      line-height: 26px;
      margin-top: 50px;
    }
    .price-img {
      width: 270px;
      margin-top: 25px;
    }
    .price-info {
      margin-top: 20px;
      font-size: 14px;
      line-height: 28px;
    }
    .price-border {
      height: 0px;
      width: 100%;
      border-top: 1px dashed #fff;
      margin: 50px auto;
    }
  }
}
</style>
